import React from 'react';
import './index.css';
import PointInput from './pointInput';
import { Input, InputNumber, Select } from 'antd';


const TypeInput = props => {
    const {
        editable=false, // 是否可编辑
        type='text', //类型 
        value,
        definition={},
        onChange,
    } = props;

    const changeData = (value) => {
        if(onChange){
            // debugger
            onChange(value);
        }
    };

    const parseEditInput = (type='text', value='', definition={}) => {
        if(type === 'text'){
            return (<Input value={value} defaultValue={value} onChange={e =>{
                e.persist();
                e.preventDefault()
                e.stopPropagation()
                changeData(e.target.value)
            }}/>);
        }else if(type === 'number'){
            return (<InputNumber type="number" value={value} defaultValue={value} onChange={val => changeData(val)}/>)
        }else if(type === 'reference'){
            let options = definition.constaints && definition.constaints.refrerences ? definition.constaints.refrerences: [] 
            return (<Select >
                {options.map((option, index) => (
                    <Select.Option key='index' value={option.value}>{option.label}</Select.Option>
                ))}
            </Select>);
        }else if(type === 'point'){
            return (<PointInput onChange={val => changeData(val)}/>);
        }
    }

    const parseDisplayValue = (type='text', value='', definition={}) => {
        if(type === 'point'){
            return (<span>
                <span>
                    <span>x:</span>
                    <span>{value.x}</span>
                </span>
                <span>
                    <span>y:</span>
                    <span>{value.z}</span>
                </span>
                <span>
                    <span>z:</span>
                    <span>{value.z}</span>
                </span>
            </span>);
        }else {
            return (<span>
                {value}
            </span>)
        }
    }

    return (
        <span>
            {editable 
            ? parseEditInput(type, value)
            : parseDisplayValue(type, value)}
        </span>
    );
}


export default TypeInput;